<template>
  <div class="search">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          :to="back"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">
          <div class="icon iconfont icon-sousuo"></div>
          <input
            type="text"
            v-model="value"
            placeholder="搜索目的地/景点/酒店等"
          />
          <div class="icontwo iconfont icon-cuowu" @click="cuo"></div>
        </div>
        <div class="header_right" @click="search">搜索</div>
      </div>
      <div class="hothistory" v-show="falg == 1">
        <!-- 搜索历史 star  -->
        <div class="history">
          <div class="history_title">
            <p>最近搜索</p>
            <p @click="clear">清空</p>
          </div>
          <div class="history_list">
            <ul>
              <li v-for="(item, index) in searchHistory" :key="index" @click="hot(item)">
                <p>{{ item }}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 热门 -->
        <div class="history hot">
          <div class="history_title">
            <p>热门搜索</p>
          </div>
          <div class="history_list">
            <ul>
              <li v-for="(item,index) in list" :key="index" @click="hot(item)"><p>{{item}}</p></li>
            </ul>
          </div>
        </div>
        <!-- 搜索历史 end  -->
      </div>

      <div class="searchover" v-show="falg == 2">
        <ul>
          <li
            v-for="(item, index) in result"
            :key="index"
            @click="detailed(item.productId, item.bigImageUrl)"
          >
            <div class="top">
              <div class="over_left">
                <img :src="item.bigImageUrl" alt="" />
              </div>
              <div class="over_right">
                <div class="right_titleone">{{ item.productName }}</div>
                <div class="right_titletwo">
                  {{ item.productTitleContent }}
                </div>
                <div class="rightbottom">
                  <div class="price">
                    <div class="newprice">
                      <strong
                        >￥<span>{{ item.price }}</span
                        >起</strong
                      >
                    </div>
                    <div class="oldprice">
                      <del>￥{{ item.retailPrice }}</del>
                    </div>
                  </div>
                  <div class="Sold">已售{{ item.saledCount }}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <p class="none" v-show="falg == 3">暂无内容哦~</p>
    </div>
  </div>
</template>

<script>
import { getJsonHomeSelectedData } from "../api/comment.js";
export default {
  data() {
    return {
      value: "",
      searchHistory: [],
      result: [],
      allSearch: [],
      falg: 1,
      cityCode:null,
      back:null,
      list:["一日游",
            "珠海长隆",
            "阳江海陵岛",
            "广州融创",
            "惠州双月湾",
            "广州长隆",
            "亲子庄园",
            "清远熹乐谷",
        ]
    };
  },
  methods: {
    search() {
      if (this.value != "") {
        console.log(this.value);
        if (this.searchHistory.indexOf(this.value) == -1) {
          this.searchHistory.push(this.value);
          window.localStorage.setItem(
            "historylist",
            JSON.stringify(this.searchHistory)
          );
          console.log(this.searchHistory);
        }
        this.result = [];
        this.result = this.allSearch.filter((item) => {
          return (
            item.productName.indexOf(this.value) != -1 ||
            item.cityName.indexOf(this.value) != -1
          );
        });
        if (this.result.length == 0) {
          this.falg = 3;
        } else {
          this.falg = 2;
        }
        // this.value=""
        console.log(this.result);
        console.log(this.result.length);
      }else{
        this.$toast("搜索内容不能为空");
      }
    },
    
    cuo(){
        this.falg=1
        this.value=""
    },
    hot(item){
        this.value=item;
        this.search()
    },
    // 清除所有搜索历史
    clear() {
      window.localStorage.removeItem("historylist");
      this.searchHistory = [];
    },
    detailed(id, img) {
      this.$router.push(
        "/details?back=/home&productId=" + id + "&productImg=" + img
      );
    },
  },
  created() {
    this.cityCode = this.$route.query.cityCode;
    this.back = this.$route.query.back;
    if (JSON.parse(localStorage.getItem("historylist"))) {
      this.searchHistory = JSON.parse(localStorage.getItem("historylist"));
    }
    getJsonHomeSelectedData({ cityCode: this.cityCode }).then((data) => {
      this.allSearch = data.content.content;
      console.log(this.allSearch);
    });
  },
};
</script>

<style lang="scss" scoped>
.search {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 5;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
        flex: 1;
        padding: 0 75px 0 10px;
        position: relative;
        .icon {
          position: absolute;
          left: 20px;
          top: 7px;
        }
        .icontwo {
          position: absolute;
          right: 25px;
          top: 7px;
        }
        input {
          font-size: 14px;
          height: 30px;
          width: 100%;
          background-color: rgb(248, 241, 233);
          border: none;
          padding: 0 30px;
          border-radius: 15px;
        }
      }
      .header_right {
        color: #fc9632;
      }
    }
    .history {
      padding: 0 16px;
      .history_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        p {
          color: #333;
          font-size: 14px;
          font-weight: bold;
          &:nth-child(2) {
            color: #707070;
          }
        }
      }
      .history_list {
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          li {
            margin: 10px;
            border: 1px solid #ccc;
            padding: 5px 10px;
            border-radius: 16px;
          }
        }
      }
    }
    .hot {
      margin-top: 50px;
    }
    .searchover {
      ul {
        li {
          padding: 10px 0;
          margin: 0 16px;
          border-top: 1px solid rgb(227, 222, 222);
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .over_left {
              width: 120px;
              height: 80px;
              background-color: #fc9632;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .over_right {
              width: 210px;
              .right_titleone {
                width: 200px;
                color: #332416;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
              }
              .right_titletwo {
                font-size: 15px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                color: #877d74;
              }
            }
            .rightbottom {
              font-size: 13px;
              color: #877d74;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .price {
                display: flex;
                align-items: center;
                .newprice {
                  color: red;
                  font-size: 13px;
                  padding-right: 10px;
                  border-right: 1px solid #ccc;
                  span {
                    font-size: 18px;
                  }
                }
                .oldprice {
                  padding-left: 10px;
                }
              }
            }
          }
        }
      }
    }
    .none {
      color: #333;
      font-size: 30px;
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>